import 'package:concierge/generated/assets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../generated/locales.g.dart';
import '../../widgets/ms_app_bar.dart';
import 'logic.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<LoginLogic>();
    final state = logic.state;
    return Scaffold(
      appBar: MSAppBar(title: LocaleKeys.login.tr),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 顶部图片区域
          Container(
            height: 480.h,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.grey.shade200,
              image: const DecorationImage(
                image: AssetImage(Assets.imagesBgDark),
                fit: BoxFit.cover,
                opacity: 0.9,
              ),
            ),
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'VERTU LIFE',
                  style: TextStyle(
                    fontSize: 28.sp,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    letterSpacing: 4,
                  ),
                ),
                SizedBox(height: 8.h),
                Text(
                  'LIFE BEAUTIFULLY ARRANGED',
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: Colors.white,
                    letterSpacing: 2,
                  ),
                ),
              ],
            ),
          ),

          // 登录区域
          Container(
            padding: EdgeInsets.all(24.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                // MY VERTU 和登录按钮
                Row(
                  children: [
                    Container(
                      width: 40.w,
                      height: 40.w,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.black,
                      ),
                      alignment: Alignment.center,
                      child: Text(
                        'M',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 18.sp,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    SizedBox(width: 12.w),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'MY VERTU',
                          style: TextStyle(
                            fontSize: 16.sp,
                            fontWeight: FontWeight.bold,
                            color: context.theme.colorScheme.primary,
                          ),
                        ),
                        Text(
                          'already logged in',
                          style: TextStyle(
                            fontSize: 12.sp,
                            color: context.theme.colorScheme.onPrimary,
                          ),
                        ),
                      ],
                    ),
                    Text(
                      'LOGIN',
                      style: TextStyle(
                        fontSize: 14.sp,
                        color: context.theme.colorScheme.primary,
                      ),
                    ),
                  ],
                ),

                // OR 分隔线
                Container(
                  margin: EdgeInsets.symmetric(vertical: 12.h),
                  child: Row(
                    children: [
                      Expanded(
                        child: Divider(
                          color: context.theme.colorScheme.outline,
                          height: 1,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 10.w),
                        child: Text(
                          'OR',
                          style: TextStyle(
                            fontSize: 14.sp,
                            color: context.theme.colorScheme.onPrimary,
                          ),
                        ),
                      ),
                      Expanded(
                        child: Divider(
                          color: context.theme.colorScheme.outline,
                          height: 1,
                        ),
                      ),
                    ],
                  ),
                ),
                Obx(
                  () => Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: List.generate(state.loginTypes.length, (i) {
                      var type = state.loginTypes[i];
                      return Container(
                        width: 40,
                        height: 40,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: context.theme.colorScheme.secondaryContainer,
                        ),
                        child: IconButton(
                          icon: Icon(
                            type.iconData,
                            size: 32,
                            color: context.theme.colorScheme.primary,
                          ),
                          onPressed: () {
                            logic.loginType(type);
                          },
                        ),
                      );
                    }),
                  ),
                ),

                SizedBox(height: 40.h),
                Center(
                  child: Text(
                    LocaleKeys.login_agree_terms.tr,
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: context.theme.colorScheme.onPrimary,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
